import React, {Suspense, useState} from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import Example1 from "./Example-1";
import {Hooks} from "./Hooks";
import {UseReducer} from "./component/use-reducer/UseReducer";

const Lazy1 = React.lazy(() =>
    import(/*webpackChunkName: 'lazyComponent'*/'./Lazy-1')
);

const Lazy2 = React.lazy(() =>
    import(/*webpackChunkName: 'lazyComponent'*/'./Lazy-2')
);

const FC = ({count}) => {
    console.log(count, 9988)
    return <div>FC{count}</div>
}

function App() {
    const [count, setCount] = useState(0)
    const add = () => {
        setCount(count + 1)
    }

    const stay = () => {
        setCount(count)
    }
  return (
    <div className="App">
      <h1 onClick={add}>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
       {count > 1 && <Suspense fallback={<div>fuck you loading</div>}>
            <Lazy1 />
        </Suspense>}
       {count > 2 && <Suspense fallback={<div>love you loading loading loading</div>}>
            <Lazy2 />
        </Suspense>}
        <button onClick={add}>add</button>
        {/*函数时组件中设置状态，如果状态没有改变，则不重新渲染*/}
        <button onClick={stay}>stay</button>
        {/*所以下面的组件也不会重新渲染*/}
        <FC
            count={count}
        />
        12123123
        {/*如果函数重新渲染，子组件也会重新渲染, 但子组件如果是Pure的就不会无脑重新渲染*/}
        <Example1/>
        <Hooks />
        <UseReducer />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
